<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* ---- reset ---- */

			body {
			  margin: 0;
			  font:normal 75% Arial, Helvetica, sans-serif;
			  background-color: #000;
			  width: 100%;
			  height: 100%;
			}

			canvas {
			  display: block;
			  vertical-align: bottom;
			}

			/* ---- particles.js container ---- */

			#particles-js {
			  position: absolute;
			  width: 500px;
			  height: 500px;
			  left: 50%;
			  top: 50%;
			  margin-top: -250px;
			  margin-left: -250px;
			  border-radius: 50%;
			  overflow: hidden;
			  background-image: url(img/pic_the_earth.png);
			  background-repeat: no-repeat;
			  background-size: cover;
			  background-position: 50% 50%;
			}

			/* ---- stats.js ---- */

			.count-particles{
			  background: #000022;
			  position: absolute;
			  top: 48px;
			  left: 0;
			  width: 80px;
			  color: #13E8E9;
			  font-size: .8em;
			  text-align: left;
			  text-indent: 4px;
			  line-height: 14px;
			  padding-bottom: 2px;
			  font-family: Helvetica, Arial, sans-serif;
			  font-weight: bold;
			}

			.js-count-particles{
			  font-size: 1.1em;
			}

			#stats,
			.count-particles{
			  -webkit-user-select: none;
			}

			#stats{
			  border-radius: 3px 3px 0 0;
			  overflow: hidden;
			}

			.count-particles{
			  border-radius: 0 0 3px 3px;
			}
		</style>
	</head>
	<body>
	<div id="particles-js"></div>

	<script src="js/particles.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		particlesJS.load('particles-js', 'js/particles.json', function() {
		  console.log('callback - particles.js config loaded');
		});
	</script>
	</body>
	
</html>
